@charset "UTF-8";

//字体文件请改为英文，中文在现场的部分服务器中不被识别
//@font-face {
//    font-family: "zzgflht";
//    src: url("../font/zzgflht.otf");
//}

body,
html,
div,
blockquote,
img,
label,
p,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
ul,
ol,
li,
dl,
dt,
dd,
form,
a,
fieldset,
button,
input,
select,
textarea,
th,
td,
span {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body,
button,
input,
select,
textarea {
    font: @s_font/1.5 "pingfang SC", "\5FAE\8F6F\96C5\9ED1", arial, verdana, sans-serif;
    color: @c_font;
}
ul,
ol {
    list-style: none;
}
table {
    border-collapse: collapse;
}

html,
body {
    height: 100%;
    background: #F2F4FB;
}

// 公共样式
.wrap {}
.wrap-abs {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.wrap-con {}
.page {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #F2F4FB;
    overflow: auto;
}
.page._sub {
    //子页
    padding: 0;
    background-color: transparent;
}
.flex-row {
    display: flex;
    flex-direction: row;
    &>.flex1 {
        width: 0;
    }
}
.flex-col {
    display: flex;
    flex-direction: column;
    &>.flex1 {
        height: 0;
    }
}
.flex1 {
    flex: 1;
    overflow: auto;
}
//通用容器
.margin-l {
    margin-left: @s_margin_h;
}
.margin-t {
    margin-top: @s_margin_v;
}
//<div class="panel">
//    <div class="panel-head">
//        <div class="panel-head-l"><div class="panel-icon _info"></div>标题</div>
//        <div class="panel-head-r">更多</div>
//    </div>
//    <div class="panel-body">
//        内容
//    </div>
//</div>
.panel_padding() {
    padding: @s_padding_v @s_padding_h;
}
.panel {
    background: @c_bg;
    border-radius: 4px;
}
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 @s_padding_h;
    border-radius: 4px 4px 0 0;
    .l_linear_gradient(#fff, #F5F5F5, to bottom);
}
.panel-head-l {
    display: flex;
    align-items: center;
    font-size: .18rem;
    font-weight: bold;
}
.panel-body {
    .panel_padding();
}
.panel-icon {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    background: center no-repeat;
    //background-size: 22px;


    &._default {
        display: block;
        width: 6px;
        height: 20px;
        margin-right: 10px;
        border-radius: 4px;
        .l_linear_gradient(#4A96FF, #1F4E99, to bottom);
    }
}
.panel._stretch {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
    &>.panel-body {
        flex: 1;
        height: 0;
        overflow: auto;
    }
}

//只包含 body 的 panel
.panel._body {
    .panel_padding();
}

//可以包含 panel，也可以和 panel 同级，只用于布局
.block {}

//容器间距
.panel+.panel,
.panel+.block,
.block+.block,
.block+.panel {
    margin-top: @s_margin_v;
}
.flex-row>.panel+.panel,
.flex-row>.panel+.block,
.flex-row>.block+.block,
.flex-row>.block+.panel {
    margin-top: 0;
    margin-left: @s_margin_h;
}
.panel._first {
    //场景：第一项用 display:none 或 v-show 控制隐藏时，之后的项显示为第一项时，需要加 _first 去掉前面的边距
    margin-top: 0;
    margin-left: 0;
}

//顶部：搜索+按钮 panel page-top
.page-top {
    .el-form {
        margin-bottom: -@s_padding_v; //去掉最后一行的底部边距
        overflow: hidden;
        .l_clear();
    }
    .el-form-item {
        margin-bottom: @s_padding_v; //调小行距
    }
}
.page-top-btns {
    //按钮组
    &._right {
        text-align: right;
    }
    .el-button {
        min-width: 34px;
    }
}
.page-top-title {
    font-size: 16px;
    font-weight: bold;
    color: #409eff;
    .l_nowrap();
}
//底部：按钮 panel page-bottom
.page-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
}

//覆写 element 样式
@import './element.less';
//覆写 wiv 样式
@import './wiv.less';
//覆写 hami 样式
//@import './hamigua.less';
//此项目中未引入 hamigua 依赖，hamigua 的功能迁入 components/hamigua/ 中实现，要在引入后在添加覆写样式，因此 hamigua.less 在 index/index.vue 中引入

//----- 富文本编辑 BEGIN
.com-editor {
    height: 100%;
    .ck.ck-editor {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }
    .ck-editor__main {
        flex: 1;
        height: 0;
    }
    .ck-content {
        height: 100%;
        overflow: auto;
    }
}
//----- 富文本编辑 END

//日期范围
.com-datebar {
    display: flex;
    flex-direction: row;
    align-items: center;
    &>.el-input {
        flex: 1;
        width: 0;
    }
}
.com-datebar-span {
    padding: 0 8px;
    color: #606266; //色号同 el-item 的 label
}

//标签页
.moduletabs {
    .el-tabs__header {
        margin: 0 0 @s_margin_v;
        padding: 0 @s_padding_h;
        background: #fff;
    }
    .el-tabs__nav-wrap::after {
        display: none;
    }
    .el-tabs__item {
        height: 40px;
        line-height: 40px;
        padding: 0 30px;
        color: @c_font;
        &.is-active {
            color: @c_main;
            font-weight: bold;
        }
    }
    //需求提出：希望关闭按钮在蓝色边框外面
    //.el-icon-close 改为绝对定位，覆写修改关闭的位置，tab 过多出现箭头时，最后一项无法关闭
    //此外中间项因为会添加横向 padding，位置与最后一项的 right 不同
    //=> 暂不实现此需求
}
.moduletabs-i {
    position: relative;
    display: inline-block;
}
.moduletabs-mark {
    position: absolute;
    top: 0;
    right: -30px;
    max-width: 32px;
    padding: 0 4px;
    height: 16px;
    line-height: 16px;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    background: #F56C6C;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
//拉伸撑满容器
.moduletabs._stretch {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .el-tabs__content {
        flex: 1;
        .el-tab-pane {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: auto;
        }
    }
}

//递增递减输入框
.moduleinput {
    .el-input-group__append {
        padding: 0 5px;
        background: #fff;
        box-sizing: border-box;
    }
    .moduleinput-btns {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .moduleinput-btn {
        flex: 1;
        cursor: pointer;
        .l_noselect();
    }
}

//可编辑表格
.moduletable {
    //&.el-table--medium .el-table__body-wrapper .el-table__cell {
    //    padding: 0;
    //}
    &.el-table--small .el-table__body-wrapper .el-table__cell {
        padding: 0;
    }
    //&.el-table--mini .el-table__body-wrapper .el-table__cell {
    //    padding: 0;
    //}

    //el 样式默认有 margin-bottom，表单项验证提示内容显示在元素下方
    //为实现元素垂直居中，补齐 margin-top，并使其与 margin-bottom 一致
    //.el-form-item--medium.el-form-item,
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
        margin-top: 18px;
    }
}

//按钮
.com-button {
    //上传
    &._upload {
        line-height: 0;
        font-size: 0;
        margin-left: 10px;
        display: inline-flex;
    }
}

//编辑表格
.com-edittable-addbtn {
    //新增行按钮
    width: 100%;
    margin-top: 8px;
}

//滚动导航：使用 ant-design anchor
//.com-anchor-nav {
//    padding: (.16rem-.04) 0 .16rem;
//    background: #F2F4FB;
//
//    .ant-anchor {
//        display: flex;
//        flex-direction: row;
//        justify-content: center;
//        flex-wrap: wrap;
//    }
//    .ant-anchor-link {
//        margin-top: .04rem;
//        font-size: .18rem;
//        color: @c_main;
//        background: rgba(71, 154, 255, .2);
//        border-radius: 4px;
//    }
//    .ant-anchor-link+.ant-anchor-link {
//        margin-left: .08rem;
//    }
//    .ant-anchor-link.ant-anchor-link-active {
//        color: #fff;
//        background: @c_main;
//    }
//
//    .ant-anchor-link-title {
//        display: block;
//        min-width: 1.12rem;
//        height: .42rem;
//        padding: 0 .04rem;
//        line-height: .42rem;
//        color: inherit;
//        text-align: center;
//        text-decoration: none;
//    }
//}

//部门选择下拉框
//.com-dropdept {
//    width: 730px;
//    height: 300px;
//    padding: 10px;
//    background: #fff;
//    overflow-y: auto;
//    z-index: 100;
//}



//--- 列表预览（文件上传）
.com-file-list {}
.com-file-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.com-file-name {
    .l_nowrap();
}
.com-file-tools {
    flex-shrink: 0;
    padding-left: 8px;
}
.com-file-tool {
    color: #409EFF;
    cursor: pointer;
    &:hover {
        text-decoration: underline;
        opacity: @e_active_opacity;
    }

    &._danger {
        color: #F56C6C;
    }
    &+& {
        margin-left: 4px;
    }
}

//--- 缩略图预览（文件上传）
.com-thumbnail-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.com-thumbnail-item {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px 0;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);

    &+& {
        margin-left: 20px;
    }
}
.com-thumbnail-upload-img {
    display: block;
    width: 100%;
    height: 100%;
}
.com-thumbnail-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 1px dashed #d9d9d9;
    font-size: 30px;
    color: #d9d9d9;
    border-radius: 6px;
    &:hover {
        border-color: #409eff;
        color: #409eff;
    }
}
//删除按钮
.com-thumbnail-delete {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    transform: translate(40%, -40%);
    border-radius: 50%;
    border: 1px solid #fff;
    background: #ff5500; //红色
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    &:hover {
        opacity: @e_active_opacity;
    }
}


//图表
.chart-box,
.chart {
    height: 100%;
}

//------ 图文列表
.twlb-item {
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #EDEDED;
}
.twlb-image {
    width: 190px;
    height: 140px;
    margin-right: 20px;
    cursor: pointer;
}
.twlb-image-error {
    height: 100%;
    background: #F9F9F9 url("../images/common/common/twlb/zwtp.png") center no-repeat;
}
.twlb-item-nr {
    justify-content: space-between;
}
.twlb-item-bt {
    padding-left: 35px;
    font-size: 18px;
    font-weight: bold;
    color: #0273C9;
    background: url("../images/common/common/twlb/bttb.png") left center no-repeat;
    .l_nowrap();
}
.twlb-item-zy,
.twlb-item-sj {
    font-size: 14px;
    color: #AFAFAF;
    .l_nowrap();
}
.twlb-item-zt {
    justify-content: space-between;
}
.twlb-item-ztbq {
    width: 105px;
    height: 32px;
    line-height: 32px;
    color: #0087DE;
    background-color: #E8F6FF;
    text-align: center;
}
.twlb-item-btn {
    height: 32px;
    line-height: 32px;
    margin-right: 0.7rem;
    font-size: 12px;
    color: #999999;
    cursor: pointer;

    &:hover {
        color: #0087DE;
    }
    &._delete:hover {
        color: #F56C6C;
    }
}
//地图
.home-map {
    .leaflet-div-icon {
        background: none;
        border: none;
    }
    .map-ponit {
        position: relative;
        width: 136px;
        height: 27px;
    }
    .map-point-icon {
        position: relative;
        z-index: 1;
        width: 38px;
        height: 100%;
        line-height: 27px;
        background: url("../images/views/home/map/icon.png");
        color: #fff;
        text-align: center;
    }
    .map-point-count {
        position: absolute;
        top: 0;
        left: 35px;
        width: 104px;
        height: 27px;
        padding-left: 3px;
        line-height: 27px;
        border: 1px solid #1E9AD2;
        border-radius: 4px;
        background: #fff;
        text-align: center;
        .l_nowrap();
    }
    .map-marker-car {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: url("../images/views/home/map/car.png");
    }
    .map-car-box {
        width: 100%;
        height: 100%;
    }
    .map-car-list {
        display: flex;
        padding-bottom: 14px;
    }
    .map-car-title {
        width: 30%;
        text-align: right;
    }
    .map-car-text {
        flex: 1;
    }
    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
        background: rgba(35, 74, 126, 0.78);
        color: #fff;
    }
    a.leaflet-popup-close-button {
        top: 33px;
        right: 40px;
        width: 18px;
        height: 18px;
        padding: 0;
        background: #0E7A88;
    }
    a.leaflet-popup-close-button span {
        display: inline-block;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
    }
    .el-input__inner {
        color: #fff;
        background-color: #234c77;
        border-radius: 0;
        border: 1px solid #0e7a88;
    }
    .el-select:hover .el-input__inner {
        border: 1px solid #0e7a88;
    }
    .el-range-input {
        color: #fff;
        background-color: #234c77;
    }
    .el-range-separator {
        padding: 0;
        line-height: 27px;
        color: #fff;
    }
    .el-date-editor {
        width: 300px;
    }
    .el-table {
        background: none;
    }
    .el-table::before {
        background-color: #0E7A88;
    }
    .el-table tr th.el-table__cell {
        font-size: 10px;
        font-weight: bold;
        background: #234C77;
        color: #15BADE;
    }
    .el-table tr {
        font-size: 10px;
        font-weight: bold;
        background: #234C77;
        color: #fff;
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
        background: #234C77;
    }
    .el-table tr td.el-table__cell,
    .el-table tr th.el-table__cell.is-leaf {
        border-color: #0E7A88;
    }
    .el-table tr td.el-table__cell:last-child {
        border-right: 2px solid #0E7A88;
    }
    .el-table--border,
    .el-table--group,
    .el-table--border th.el-table__cell,
    .el-table__fixed-right-patch {
        border: none;
    }
    .el-table--border::after,
    .el-table--group::after {
        background: none;
    }
    .el-table--border::after,
    .el-table--group::after {
        display: none;
    }
}
.tooltip-select {
    background-color: #234c77;
    border: none;
    .hover {
        background-color: #234c77;
    }
    .el-select-dropdown__item {
        color: #fff;
    }
    .popper__arrow {
        border-bottom-color: #234c77 !important;
        &::after {
            border-bottom-color: #234c77 !important;
        }
    }
}